<script setup lang="ts">
import { ref, Ref, computed, ComputedRef } from 'vue';
import { useRouter } from 'vue-router';
import { getCheckPhone } from '../../api/user'
import { showToast, showConfirmDialog } from 'vant'
const router = useRouter()

const tel: Ref<string> = ref('')

// 通过计算属性验证手机号是否合法
// 如果手机号不合法就设置下一步的按钮无法被点击
let flag: ComputedRef<boolean> = computed(() => {
  if (/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(tel.value)) {
    // 手机号合法
    return false
  } else {
    // 手机号不合法
    return true
  }
})


function onSubmit() {
  // this.$router.push()
  // router.push('/register/step2')

  // 1. 先验证手机号是否合法
  //
  // 2. 判断手机号是否被注册
  getCheckPhone({
    tel: tel.value
  }).then(res => {
    // console.log(res);
    if (res.data.code == '200') {
      // 可以下一步
      // 将用户手机号存起来，下一个页面需要给其发送验证码
      localStorage.setItem('tel', tel.value)
      router.push('/register/step2')
    } else if (res.data.code == '10005') {
      // 注册有问题
      // 提示框告诉用户该手机号已经被注册
      showConfirmDialog({
        title: '结果',
        message: '该手机号已经被注册，是否需要直接登录呢？',
        confirmButtonText: '直接登录',
        confirmButtonColor: '#f66'
      }).then(() => {
        // 点击去登录
        router.push('/login')
      }).catch(() => {
        // 点击取消
      })
    } else {
      // 未知错误
      showToast('温馨提示：' + res.data.message);
    }
  })

  // 3. 被注册可以直接登录否则可以去注册
}
</script>
<template>
  <div class="box">
    <van-nav-bar class="header" title="验证手机号" left-text="返回" left-arrow @click-left="$router.back()" />
    <div class="content">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="tel" label="手机号" placeholder="请输入手机号" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button :disabled="flag" round block type="danger" native-type="submit">
            下一步
          </van-button>
        </div>

      </van-form>
    </div>
  </div>
</template>
<style scoped lang="scss">
.header {
  margin-bottom: 30px;
  background-color: #f1f8e9;
}
</style>
